<template>
	<view class="content">
		<view class="location">
			<view class="left">
				<u-icon name="map" color="#328FFE" size="20"></u-icon>
				<text class="loc_name" @tap.stop="toLocSea">{{communityName||"请选择小区"}}</text>
				<u-icon name="arrow-right" color="#4A4549" size="16"></u-icon>
			</view>
			<!-- <view class="right">
				<u-search shape="round" placeholder="搜索商品" :showAction="false" @focus="toSearch"></u-search>
			</view> -->
		</view>
		<!-- <img src="https://img.cnmo.com/2018_600x1000/2017858.jpg" alt=""> -->
		<u-swiper class="banner" height="150" :list="bannerList"></u-swiper>
		<view class="menu">
			<view class="menu-item express" @click="toExpress">
				<image class="img" src="@/static/images/swt.png" mode=""></image>
				<view class="right">
					<view class="title">取快递</view>
					<view class="des">送到门口</view>
				</view>
			</view>
			<view class="menu-item run" @click="toRun">
				<image class="img" src="@/static/images/market.png" mode=""></image>
				<view class="right">
					<view class="title">跑腿</view>
					<view class="des">足不出户</view>
				</view>
			</view>
		</view>
		<view class="station-wapper">
			<view class="station" v-for="(item,index) in stationList" :key="index">
				<view class="left">
					<img class="img" :src="item.avatar" alt="">
				</view>
				<view class="right">
					<view class="station-name">
						{{item.stationName}}
					</view>
					<view class="station-address">
						{{item.street}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCommunityById
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				title: 'Hello',
				bannerList: [
					"https://img.cnmo.com/2018_600x1000/2017858.jpg",
					"https://fs-im-kefu.7moor-fs1.com/ly/4d2c3f00-7d4c-11e5-af15-41bf63ae4ea0/1728908895624/banner1.jpeg"
				],
				stationList: []
			}
		},
		onLoad() {
			this.toGetCommunity()
		},
		methods: {
			async toGetCommunity() {
				if (uni.getStorageSync("communityId") == "") {
					return uni.navigateTo({
						url: "/pages/index/location"
					})
				}

				const res = await getCommunityById({
					id: uni.getStorageSync("communityId") || ''

				}).catch(err => {
					console.log(err)
				})
				console.log(res);
				this.stationList = res.data.stationList
			},
			toExpress() {},
			toRun() {},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.location {
		display: flex;
		margin-bottom: 14rpx;
		align-items: center;

		.left {
			margin-left: 10rpx;
			display: flex;
			// flex: 1;
			width: 60%;

			.loc_name {
				color: #4A4549;
				margin-left: 6rpx;
			}
		}

	}

	.banner {
		width: 95%;
		margin-top: 20rpx;
	}

	.menu {
		width: 80%;
		height: 280rpx;
		background-color: #FCF0D8;
		position: relative;
		margin-top: -30rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.menu-item {
			display: flex;
			// flex-direction: column;
			flex: 1;
			text-align: center;

			position: relative;
			justify-content: center;
			align-items: center;

			.img {
				width: 60rpx;
				height: 60rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 18rpx;

				.title {
					color: #2E9A3C;
					font-size: 40rpx;
					font-weight: bold;
				}

				.des {
					font-size: 30rpx;
					color: #72787B;
				}
			}
		}

		.run {
			.right {
				.title {
					color: #0075FF;
				}
			}
		}

		.line {
			position: absolute;
			left: 50%;
		}
	}

	.station-wapper {
		width: 100%;

		.station {
			margin: 20rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			background-color: #F2F2F2;
			margin-bottom: 20rpx;
			border-radius: 10rpx;

			.left {
				margin-right: 20rpx;

				.img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
			}

			.right {
				.station-name {
					font-weight: bold;
					padding-bottom: 10rpx;
				}

				.station-address {
					font-size: 30rpx
				}
			}
		}
	}
</style>
